<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>首页</title>
		<link rel="stylesheet" href="./css/bootstrap.css">
		<link rel="stylesheet" href="./css/css/bootstrap-icons.min.css">
		<style>
			.carousel>div img {
				width: 300px;
				transition: 0.5s;
				position: absolute;
			}

			.left_none {
				left: -30%;
				transform: scale(0);
				opacity: 0;

			}

			.left {
				left: 0%;
				transform: scale(0.6);
				opacity: 0.4;

			}

			.center {
				left: 40%;
				transform: scale(1.3);
				z-index: 2;
				opacity: 1;
			}

			.right {
				left: 80%;
				opacity: 0.4;
				transform: scale(0.6);
			}

			.right_none {
				left: 130%;
				opacity: 0;
				transform: scale(0);
			}

			.carousel .act {
				color: #00fff7;
				text-shadow: 0 0 20px;
			}

			.indicator i:not(.act) {
				color: #ffb0b0;
			}

			.goods>ul img {
				width: 300px;
				right: calc(100% - 300px);
				transition: 0.5s;
			}

			.goods>ul .act {
				right: 0;
			}

			.goods>ul li {
				height: 200px;
			}

			.ca:not(.act){
				display: none;
			}
			.layer{
				position: absolute;
				width: 200px;
				height: 200px;
				left: 0;
				top: 0;
				
				background-color: rgba(0,0,0,0.6);
				display: none;
			}
			.large{
				width: 400px;
				height: 400px;
				overflow: hidden;
				position: absolute;
				background-image: url('img/1.jpg');
				background-size: 200%;
				background-repeat: no-repeat;
				left: 100%;
				top: 0;
				z-index: 1;
				display: none;
			}
			.btns>.act{
				color: blue;
			}
		</style>
	</head>
	<body style="background:#f6f6f6;">
		<nav class="navbar bg-white sticky-top">
			<div>
				<a href="#" class="text-dark text-decoration-none"><img src="./img/Logo.png" alt="">首页</a>
			</div>
			<div>
				<p class="d-inline mr-5">没有账户？ <a href="./Sign.html">去注册</a></p>
				<a href="./shop.html" class="text-danger"><i class="bi bi-shop-window"></i>购物车</a>
			</div>
		</nav>
		<div class="carousel position-relative my-5">
			<h1 class=" my-5 text-center">
				<span class="text-secondary">Super Theme Day</span> <br>
				Choosing your Nike
			</h1>
			<div class="container-fluid vw-100 position-relative overflow-hidden mt-5" style="height: 400px;">
				<img src="./goods/Snipaste_2023-06-08_14-26-46.png" alt="" class="left_none" data-id="4">
				<img src="./goods/Snipaste_2023-06-08_14-27-21.png" alt="" class="left" data-id="5">
				<img src="./goods/Snipaste_2023-06-08_14-27-51.png" alt="" class="center" data-id="1">
				<img src="./goods/Snipaste_2023-06-08_14-30-47.png" alt="" class="right" data-id="2">
				<img src="./goods/Snipaste_2023-06-08_14-31-21.png" alt="" class="right_none" data-id="3">
			</div>
			<ul class="indicator position-absolute list-unstyled d-flex"
				style="left: 50%; transform: translateX(-50%);">
				<li class="mx-3"><i data-item="1" class="bi bi-circle-fill act"></i></li>
				<li class="mx-3"><i data-item="2" class="bi bi-circle-fill"></i></li>
				<li class="mx-3"><i data-item="3" class="bi bi-circle-fill"></i></li>
				<li class="mx-3"><i data-item="4" class="bi bi-circle-fill"></i></li>
				<li class="mx-3"><i data-item="5" class="bi bi-circle-fill"></i></li>
			</ul>
		</div>

		<div  class="row goods position-relative p-0" style="margin-top: 150px;">
			<ul class="col-12 position-static nava list-unstyled col-lg-4">
				<li class="position-relative">
					<a href="javascript:">
						<img src="./goods/Snipaste_2023-06-08_14-26-46.png" data-src="./img/1.jpg" data-s="1" class="position-absolute act"
							alt="">
					</a>
				</li>
				<li class="position-relative">
					<a href="javascript:">
						<img src="./goods/Snipaste_2023-06-08_14-27-21.png" data-src="./img/2.png" data-s="2" class="position-absolute" alt="">
					</a>
				</li>
				<li class="position-relative">
					<a href="javascript:">
						<img src="./goods/Snipaste_2023-06-08_14-27-51.png" data-src="./img/3.png" data-s="3" class="position-absolute" alt="">
					</a>
				</li>
				<li class="position-relative">
					<a href="javascript:">
						<img src="./goods/Snipaste_2023-06-08_14-30-47.png" data-src="./img/4.png" data-s="4" class="position-absolute" alt="">
					</a>
				</li>
				<li class="position-relative">
					<a href="javascript:">
						<img src="./goods/Snipaste_2023-06-08_14-31-21.png" data-src="./img/5.png" data-s="5" class="position-absolute" alt="">
					</a>
				</li>
			</ul>

			<div class="col-12 col-lg-8 position-static">
				<div class="ca row act">
					<div class="img position-relative col p-0">
						<img src="./img/1.jpg" style="width: 400px;
						height: 500px;" alt="">
						<div class="layer"></div>
						<div class="large"></div>
					</div>
					<div class="mx-5 col">
						<h1 class="card-title">
							Nike Dunk Low Retro SE
						</h1>
						<h5 class="font-weight-light">
							男子运动鞋
						</h5>
						<p>
							¥699 <span style="text-decoration: line-through;" class="text-secondary mx-3">¥799</span> <span
								class="text-success font-weight-bold">12% 折扣</span>
						</p>
						<p class="text-success">
							6月7日至6月9日，该商品NIKE会员至高可享满1200减160元优惠。
						</p>
						<div class="btns">
							<p class="d-flex justify-content-between">
								<span>选择尺码</span>
								<span>尺码表</span>
							</p>
							<button value="38.5" class="btn border btn-light p-3 px-3 mx-1 my-2 font-weight-bold" disabled>
								38.5
							</button>
							<button value="39" class="btn border btn-light p-3 px-4 mx-1 my-2 font-weight-bold" disabled>
								39
							</button>
							<button value="40" class="btn border btn-light p-3 px-4 mx-1 my-2 font-weight-bold">
								40
							</button>
							<button value="40.5" class="btn border btn-light p-3 px-3 mx-1 my-2 font-weight-bold">
								40.5
							</button>
							<button value="41" class="btn border btn-light p-3 px-4 mx-1 my-2 font-weight-bold">
								41
							</button>
							<button value="42" class="btn border btn-light p-3 px-4 mx-1 my-2 font-weight-bold">
								42
							</button>
							<button value="42.5" class="btn border btn-light p-3 px-3 mx-1 my-2 font-weight-bold" disabled>
								42.5
							</button>
							<button value="43" class="btn border btn-light p-3 px-4 mx-1 my-2 font-weight-bold" disabled>
								43
							</button>
							<button value="44" class="btn border btn-light p-3 px-4 mx-1 my-2 font-weight-bold" disabled>
								44
							</button>
							<button value="44.5" class="btn border btn-light p-3 px-3 mx-1 my-2 font-weight-bold" disabled>
								44.5
							</button>
							<button value="45" class="btn border btn-light p-3 px-4 mx-1 my-2 font-weight-bold" disabled>
								45
							</button>
							<button value="46" class="btn border btn-light p-3 px-4 mx-1 my-2 font-weight-bold" disabled>
								46
							</button>
						</div>
						<button class="btn btn-dark btn-block rounded-pill py-3 join" data-ids="good1">
							加入购物车
						</button>
						<button class="btn btn-outline-dark btn-block rounded-pill py-3">
							收藏 <i class="bi bi-heart"></i>
						</button>
					</div>
					
				</div>
				<div class="ca row">
					<div class="img position-relative col p-0">
						<img src="./img/2.png" style="width: 400px;
						height: 500px;" alt="">
						<div class="layer"></div>
						<div class="large"></div>
					</div>
					<div class="mx-5 col">
						<h1 class="card-title">
							Nike Zoom Fly 5
						</h1>
						<h5 class="font-weight-light">
							男子跑步鞋中底ZoomX轻盈缓震
						</h5>
						<p>
							¥699 <span style="text-decoration: line-through;" class="text-secondary mx-3">¥999</span> <span
								class="text-success font-weight-bold">30% 折扣</span>
						</p>
						<p class="text-success">
							6月7日至6月9日，该商品NIKE会员至高可享满1200减160元优惠。
						</p>
						<div class="btns">
							<p class="d-flex justify-content-between">
								<span>选择尺码</span>
								<span>尺码表</span>
							</p>
							<button value="38.5" class="btn border btn-light p-3 px-3 mx-1 my-2 font-weight-bold">
								38.5
							</button>
							<button value="39" class="btn border btn-light p-3 px-4 mx-1 my-2 font-weight-bold">
								39
							</button>
							<button value="40" class="btn border btn-light p-3 px-4 mx-1 my-2 font-weight-bold">
								40
							</button>
							<button value="40.5" class="btn border btn-light p-3 px-3 mx-1 my-2 font-weight-bold">
								40.5
							</button>
							<button value="41" class="btn border btn-light p-3 px-4 mx-1 my-2 font-weight-bold">
								41
							</button>
							<button value="42" class="btn border btn-light p-3 px-4 mx-1 my-2 font-weight-bold">
								42
							</button>
							<button value="42.5" class="btn border btn-light p-3 px-3 mx-1 my-2 font-weight-bold" disabled>
								42.5
							</button>
							<button value="43" class="btn border btn-light p-3 px-4 mx-1 my-2 font-weight-bold">
								43
							</button>
							<button value="44" class="btn border btn-light p-3 px-4 mx-1 my-2 font-weight-bold" disabled>
								44
							</button>
							<button value="44.5" class="btn border btn-light p-3 px-3 mx-1 my-2 font-weight-bold" disabled>
								44.5
							</button>
							<button value="45" class="btn border btn-light p-3 px-4 mx-1 my-2 font-weight-bold">
								45
							</button>
							<button value="46" class="btn border btn-light p-3 px-4 mx-1 my-2 font-weight-bold" disabled>
								46
							</button>
						</div>
						<button class="btn btn-dark btn-block rounded-pill py-3 join"  data-ids="good2">
							加入购物车
						</button>
						<button class="btn btn-outline-dark btn-block rounded-pill py-3">
							收藏 <i class="bi bi-heart"></i>
						</button>
					</div>
					
				</div>
				
				<div class="ca row">
					<div class="img position-relative col p-0">
						<img src="./img/3.png" style="width: 400px;
						height: 500px;" alt="">
						<div class="layer"></div>
						<div class="large"></div>
					</div>
					<div class="mx-5 col">
						<h1 class="card-title">
							Nike Air Zoom G.T. Cut 2 EP

						</h1>
						<h5 class="font-weight-light">
							篮球鞋实战快速切入 
						</h5>
						<p>
							¥1,099 <span style="text-decoration: line-through;" class="text-secondary mx-3">¥1,399</span> <span
								class="text-success font-weight-bold">21% 折扣</span>
						</p>
						<p class="text-success">
							6月7日至6月9日，该商品NIKE会员至高可享满1200减160元优惠。
						</p>
						<div class="btns">
							<p class="d-flex justify-content-between">
								<span>选择尺码</span>
								<span>尺码表</span>
							</p>
							<button value="38.5" class="btn border btn-light p-3 px-3 mx-1 my-2 font-weight-bold" disabled>
								38.5
							</button>
							<button value="39" class="btn border btn-light p-3 px-4 mx-1 my-2 font-weight-bold" disabled>
								39
							</button>
							<button value="40" class="btn border btn-light p-3 px-4 mx-1 my-2 font-weight-bold">
								40
							</button>
							<button value="40.5" class="btn border btn-light p-3 px-3 mx-1 my-2 font-weight-bold">
								40.5
							</button>
							<button value="41" class="btn border btn-light p-3 px-4 mx-1 my-2 font-weight-bold">
								41
							</button>
							<button value="42" class="btn border btn-light p-3 px-4 mx-1 my-2 font-weight-bold">
								42
							</button>
							<button value="42.5" class="btn border btn-light p-3 px-3 mx-1 my-2 font-weight-bold">
								42.5
							</button>
							<button value="43" class="btn border btn-light p-3 px-4 mx-1 my-2 font-weight-bold" disabled>
								43
							</button>
							<button value="44" class="btn border btn-light p-3 px-4 mx-1 my-2 font-weight-bold" disabled>
								44
							</button>
							<button value="44.5" class="btn border btn-light p-3 px-3 mx-1 my-2 font-weight-bold">
								44.5
							</button>
							<button value="45" class="btn border btn-light p-3 px-4 mx-1 my-2 font-weight-bold" disabled>
								45
							</button>
							<button value="46" class="btn border btn-light p-3 px-4 mx-1 my-2 font-weight-bold" disabled>
								46
							</button>
						</div>
						<button class="btn btn-dark btn-block rounded-pill py-3 join"  data-ids="good3">
							加入购物车
						</button>
						<button class="btn btn-outline-dark btn-block rounded-pill py-3">
							收藏 <i class="bi bi-heart"></i>
						</button>
					</div>
					
				</div>
				
				<div class="ca row">
					<div class="img position-relative col p-0">
						<img src="./img/4.png" style="width: 400px;
						height: 500px;" alt="">
						<div class="layer"></div>
						<div class="large"></div>
					</div>
					<div class="mx-5 col">
						<h1 class="card-title">
							Air Jordan XXXVII Low PF
				
						</h1>
						<h5 class="font-weight-light">
							男子篮球鞋
						</h5>
						<p>
							¥899 <span style="text-decoration: line-through;" class="text-secondary mx-3">¥1,399</span> <span
								class="text-success font-weight-bold">39% 折扣</span>
						</p>
						<p class="text-success">
							6月7日至6月9日，该商品NIKE会员至高可享满1200减160元优惠。
						</p>
						<div class="btns">
							<p class="d-flex justify-content-between">
								<span>选择尺码</span>
								<span>尺码表</span>
							</p>
							<button value="38.5" class="btn border btn-light p-3 px-3 mx-1 my-2 font-weight-bold" disabled>
								38.5
							</button>
							<button value="39" class="btn border btn-light p-3 px-4 mx-1 my-2 font-weight-bold" disabled>
								39
							</button>
							<button value="40" class="btn border btn-light p-3 px-4 mx-1 my-2 font-weight-bold">
								40
							</button>
							<button value="40.5" class="btn border btn-light p-3 px-3 mx-1 my-2 font-weight-bold">
								40.5
							</button>
							<button value="41" class="btn border btn-light p-3 px-4 mx-1 my-2 font-weight-bold">
								41
							</button>
							<button value="42" class="btn border btn-light p-3 px-4 mx-1 my-2 font-weight-bold">
								42
							</button>
							<button value="42.5" class="btn border btn-light p-3 px-3 mx-1 my-2 font-weight-bold" disabled>
								42.5
							</button>
							<button value="43" class="btn border btn-light p-3 px-4 mx-1 my-2 font-weight-bold" disabled>
								43
							</button>
							<button value="44" class="btn border btn-light p-3 px-4 mx-1 my-2 font-weight-bold" disabled>
								44
							</button>
							<button value="44.5" class="btn border btn-light p-3 px-3 mx-1 my-2 font-weight-bold" disabled>
								44.5
							</button>
							<button value="45" class="btn border btn-light p-3 px-4 mx-1 my-2 font-weight-bold" disabled>
								45
							</button>
							<button value="46" class="btn border btn-light p-3 px-4 mx-1 my-2 font-weight-bold" disabled>
								46
							</button>
						</div>
						<button class="btn btn-dark btn-block rounded-pill py-3 join" data-ids="good4" >
							加入购物车
						</button>
						<button class="btn btn-outline-dark btn-block rounded-pill py-3">
							收藏 <i class="bi bi-heart"></i>
						</button>
					</div>
					
				</div>
				
				<div class="ca row">
					<div class="img position-relative col p-0">
						<img src="./img/5.png" style="width: 400px;
						height: 500px;" alt="">
						<div class="layer"></div>
						<div class="large"></div>
					</div>
					<div class="mx-5 col">
						<h1 class="card-title">
							Air Jordan Legacy 312 Low
				
						</h1>
						<h5 class="font-weight-light">
							男子篮球鞋
						</h5>
						<p>
							¥999 <span style="text-decoration: line-through;" class="text-secondary mx-3">¥1,299</span> <span
								class="text-success font-weight-bold">39% 折扣</span>
						</p>
						<p class="text-success">
							6月7日至6月9日，该商品NIKE会员至高可享满1200减160元优惠。
						</p>
						<div class="btns">
							<p class="d-flex justify-content-between">
								<span>选择尺码</span>
								<span>尺码表</span>
							</p>
							<button value="38.5" class="btn border btn-light p-3 px-3 mx-1 my-2 font-weight-bold" disabled>
								38.5
							</button>
							<button value="39" class="btn border btn-light p-3 px-4 mx-1 my-2 font-weight-bold" disabled>
								39
							</button>
							<button value="40" class="btn border btn-light p-3 px-4 mx-1 my-2 font-weight-bold">
								40
							</button>
							<button value="40.5" class="btn border btn-light p-3 px-3 mx-1 my-2 font-weight-bold">
								40.5
							</button>
							<button value="41" class="btn border btn-light p-3 px-4 mx-1 my-2 font-weight-bold">
								41
							</button>
							<button value="42" class="btn border btn-light p-3 px-4 mx-1 my-2 font-weight-bold">
								42
							</button>
							<button value="42.5" class="btn border btn-light p-3 px-3 mx-1 my-2 font-weight-bold" disabled>
								42.5
							</button>
							<button value="43" class="btn border btn-light p-3 px-4 mx-1 my-2 font-weight-bold" disabled>
								43
							</button>
							<button value="44" class="btn border btn-light p-3 px-4 mx-1 my-2 font-weight-bold">
								44
							</button>
							<button value="44.5" class="btn border btn-light p-3 px-3 mx-1 my-2 font-weight-bold">
								44.5
							</button>
							<button value="45" class="btn border btn-light p-3 px-4 mx-1 my-2 font-weight-bold">
								45
							</button>
							<button value="46" class="btn border btn-light p-3 px-4 mx-1 my-2 font-weight-bold">
								46
							</button>
						</div>
						<button class="btn btn-dark btn-block rounded-pill py-3 join" data-ids="good5" >
							加入购物车
						</button>
						<button class="btn btn-outline-dark btn-block rounded-pill py-3">
							收藏 <i class="bi bi-heart"></i>
						</button>
					
				</div>
				
			</div>
			<script>
				/*
				轮播图部分
				*/
			   //创建上一张函数
				function prev() {
					const ln = document.querySelector('.left_none')
					const left = document.querySelector('.left')
					const center = document.querySelector('.center')
					const right = document.querySelector('.right')
					const rn = document.querySelector('.right_none')		//切换上一张图片的函数
					ln.className = 'left';	
					left.className = 'center';
					center.className = 'right';
					right.className = 'right_none'; 		//通过更改类名，给类名的添加CSS
					rn.className = 'left_none'; 
					document.querySelector('.carousel .act').classList.remove('act')
					document.querySelector(`.indicator li:nth-of-type(${document.querySelector('.center').dataset.id})>i`).classList.add('act') 		//更改轮播图的导航栏激活部分
				}
				
				
				 //创建下一张函数
				function next() {
					const ln = document.querySelector('.left_none')
					const left = document.querySelector('.left')
					const center = document.querySelector('.center')
					const right = document.querySelector('.right')
					const rn = document.querySelector('.right_none')			//切换下一张图片的函数
					rn.className = 'right';
					right.className = 'center';
					center.className = 'left';
					left.className = 'left_none';				//通过更改类名，给类名的添加CSS
					ln.className = 'right_none'
					document.querySelector('.carousel .act').classList.remove('act')
					document.querySelector(`.indicator li:nth-of-type(${document.querySelector('.center').dataset.id})>i`).classList.add('act') 	//更改轮播图的导航栏激活部分

				}
				
				
				//创建点击图片切换的函数
				document.querySelector('.carousel').addEventListener('click', function(e) {
					//当点击的图片是右边时，切换下一张
					if (e.target.className == "right") {
						next() 
					}
					//当点击的是左边时，切换上一张
					if (e.target.className == "left") {
						prev()
					}
				})
				

				//给轮播图的导航栏添加切换图片
				document.querySelector('.indicator').addEventListener('mouseover', function(e) {
					if (e.target.tagName == 'I') {
						//进入的导航栏小圆点 减去 之前已激活的导航栏小圆点的位置，得到的次数为循环的次数
						let times = parseInt(e.target.dataset.item) - parseInt(document.querySelector('.carousel .act')
							.dataset.item)
						//当次数大于0时，说明要切换下一张times次
						if (times > 0) {
							for (let i = 0; i < times; i++) {
								next()
							}
						}
						//当次数小于0时，说明要切换上一张times次
						if (times < 0) {
							for (let i = 0; i < Math.abs(times); i++) {
								prev()
							}
						}
					}
				})
				
				
				//给轮播图创建定时函数，2秒钟切换下一张
				let time = setInterval(next, 2000)
				
				
				//当鼠标进入轮播时，关闭定时器
				document.querySelector('.carousel').addEventListener('mouseenter', function(e) {
					clearInterval(time)
				})
				
				
				//当鼠标离开时重启定时器
				document.querySelector('.carousel').addEventListener('mouseleave', function(e) {
					time = setInterval(next, 2000)
				})
				
				/*
				购买商品部分
				*/
			   //获取所有展示商品的图片，遮罩层，以及放大镜盒
				const imgs = document.querySelectorAll('.img')
				const layer = document.querySelectorAll('.layer')
				const large = document.querySelectorAll('.large')
				
				
				//当鼠标进入商品导航栏时，选中某一个商品，将该商品展示 原理tab栏
				document.querySelector('.nava').addEventListener('mouseover', function(e) {
					//当鼠标进入一个商品时
					if (e.target.tagName == 'IMG') {
						//切换至当前的商品
						document.querySelector('.nava .act').classList.remove('act')
						e.target.classList.add('act') 
						//商品信息也切换为当前商品
						document.querySelector('.goods>div>.act').classList.remove('act')
						document.querySelector(`.goods>div>.ca:nth-of-type(${e.target.dataset.s})`).classList.add('act')
						document.querySelector(`.goods>div>.act .large`).style.backgroundImage = `url(${e.target.dataset.src})`
					}
				})
				
				
				for(let i = 0 ; i < imgs.length ; i++){
					imgs[i].addEventListener('mouseenter',function(){
						//当鼠标进入商品图片时，展示遮罩层和放大镜盒
						layer[i].style.display = 'block';
						large[i].style.display = 'block';
					})
					imgs[i].addEventListener('mouseleave',function(){
						//当鼠标离开商品图片时，隐藏遮罩层和放大镜盒
						layer[i].style.display = 'none';
						large[i].style.display = 'none';
					})
					imgs[i].addEventListener('mousemove',function(e){
						//当鼠标在商品图片并移动时,创建遮罩层的移动以及放大镜盒背景的移动
						
						//获取遮罩层的 x 轴的位置，因为加有row标签，宽度增加了15，所以移动的位置也要增加15
						let x = e.pageX - this.offsetLeft + 15
						
						//获取遮罩层的 y 轴的位置
						let y = e.pageY - document.querySelector('.goods').offsetTop
						
						//给移动的位置加上定义域
						if(x >= 0 && x <= 400 && y >= 0 && y <= 500){
							//创建该移动的位置
							let mx = x , my = y
							//当移动的距离小于盒子一半长宽，盒子不移动
							if(mx < 100)mx=0
							if(my < 100)my=0
							
							//当移动的距离大于盒子一半长宽并且在图片之内，盒子开始移动
							if(mx>100 && mx < 300)mx = x - 100
							if(my>=100 && my < 400)my = y - 100
							
							//当移动的距离在图片右侧，盒子不移动
							if(mx >= 300)mx = 200
							if(my >= 400)my = 300
							
							layer[i].style.left = mx  + 'px'
							layer[i].style.top = my  + 'px'
							large[i].style.backgroundPositionX = -2 * mx + 'px'
							large[i].style.backgroundPositionY = -2.25 * my + 'px'
						}
					}
					
					)
				
					
				}
				//获取选中的尺码
				const btns = document.querySelectorAll('.btns')
				for(let i = 0 ; i < btns.length ;i++){
					btns[i].addEventListener('click',function(e){
						if(e.target.tagName == 'BUTTON'){
							//当鼠标点击一个尺码时，如果先前没有选中尺码，则直接添加尺码
							if(document.querySelector('.goods>div>.act .btns>.act') == null){
								e.target.classList.add('act')
							}
							//如果先前已选中尺码，则直接删除，选择新的尺码
							else{
								document.querySelector('.goods>div>.act .btns>.act').classList.remove('act')
								e.target.classList.add('act')
							}
						}
					})
					//加入购物车
					btns[i].nextElementSibling.addEventListener('click',function(e){
						//如果未选择尺码就加入购物车，则直接提示，并结束该事件
						if(document.querySelector('.goods>div>.act .btns>.act') == null){
							return alert('请选择尺码')
						}else{
							//当选中的尺码提交时，则将该商品信息储存到localstorage
							if(localStorage.key(`${this.dataset.ids}`) != false){
								localStorage.setItem(`${this.dataset.ids}`,JSON.stringify({
									goodis:this.dataset.ids,
									size:document.querySelector('.goods>div>.act .btns>.act').value
								}))
								//购买完成，给予提示
								alert('已加入购物车，数量请在购物车页面选择')
							}
						}
					})
				}
			</script>
	</body>
</html>
